<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>按钮</button>
  <button>按钮</button>
  <script>
    var btn_get = document.querySelectorAll('button')[0]
    btn_get.addEventListener('click', function (e) {

      //1创建XMLHttpRequest对象
      var xhr = new XMLHttpRequest();
      console.log(xhr.readyState);
      //2添加状态改变的回调函数
      xhr.onreadystatechange = function () {
        console.log(xhr.readyState);
        //判断请求状态
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            console.log('请求完成且成功了');
            console.log(xhr.response);
          }
        }
      }
      //向服务器发送请求
      xhr.open('GET', 'http://192.168.2.57:8081/student/login.php?username=admin&password=admin')
      //发送请求
      xhr.send()
    })
    var btn_post = document.querySelectorAll('button')[1]
    btn_post = addEventListener('click', function () {
      var xhr = new XMLHttpRequest();
      console.log(xhr); 
      console.log(xhr.readyState);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            console.log(xhr.response)
            console.log(xhr.responseText)
          }
        }
      }
      xhr.open("POST", 'http://192.168.2.57:8081/student/login.php')
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send('username=admin&password=admin')
    })
  </script>
</body>

</html>